<template>
  <div style="overflow-y: hidden;">

    <div >
      <el-card class="jiezhangone-box-card" shadow="hover">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-position="right">

          <el-form-item label="手牌" prop="handBrand" label-width="50px">
            <el-input
              v-model="queryParams.handBrand"
              clearable
              placeholder=""
              disabled="disabled"
            />
          </el-form-item>

<!--          <el-form-item label="消费名称" prop="entryName" label-width="90px">
            <el-input
              v-model="queryParams.entryName"
              clearable
              placeholder=""
            />
          </el-form-item>

          <el-form-item label="助记码" prop="mnemonicCode" label-width="80px">
            <el-input
              v-model="queryParams.mnemonicCode"
              clearable
              placeholder=""
            />
          </el-form-item>

          <el-form-item label="项目类别" prop="" label-width="90px">
            <el-select v-model="queryParams.projectCategory" placeholder="请选择商品类别" clearable style="width: 240px">
              <el-option
                v-for="dict in dict.type.yqg_project_category"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"

              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="同来" prop="together" label-width="60px">
            <el-input
              v-model="queryParams.together"
              clearable
              placeholder=""
            />
          </el-form-item>-->
          <el-form-item style="text-align: right;">
            <el-button  type="primary" style="height:37px;width: 74px ;font-size: 14px " @click="handleQuery">读 牌</el-button>
            <el-button  style="margin-left: 1350px;height:37px;width: 74px ;font-size: 14px " @click="back">返 回</el-button>
          </el-form-item>
        </el-form>

<!--        <el-form>

        </el-form>-->

      </el-card>
    </div>
<!--    style="z-index: -9999;position: fixed;top: -10000px;left: 0;width: 240mm"-->
    <!--          打印小票-->
<!--    <div class="shaodrawer" style="z-index: -9999;position: fixed;top: -10000px;left: 0;">-->
<!--        <div id="printArejiezhang" class="whdxiaopiaocard" :data="detailsList" >-->
<!--          <span style="margin-top:10px;text-align: left;font-size: 40px" >-->
<!--            玉泉宫洗浴健足结账单-->
<!--          </span>-->
<!--          <div style="margin-top:10px;text-align: left" >-->
<!--            <span style="font-size: 25px;font-family: '楷体';">手牌号:{{queryParams.handBrand}}</span>-->
<!--          </div>-->
<!--          <div style="margin-top:1px;border-top: 4px solid #ccc;"></div>-->
<!--          <table  cellspacing="12">-->
<!--            <tr>-->
<!--              <td style="text-align: center;font-family: '楷体';">手牌号</td>-->
<!--              <td style="text-align: center;font-family: '楷体';">项目</td>-->
<!--              <td style="text-align: center;font-family: '楷体';">金额</td>-->
<!--              <td style="text-align: center;font-family: '楷体';">时间</td>-->
<!--            </tr>-->
<!--            <tr v-for="rows in tableData" >-->
<!--              <td  style="text-align: center;font-family: '楷体';">{{rows.handBrand}}</td>-->
<!--              <td style="text-align: center;font-family: '楷体';">{{rows.entryName}}</td>-->
<!--              <td style="text-align: center;font-family: '楷体';">{{rows.unitPrice}}x{{rows.quantity}}</td>-->
<!--              <td style="text-align: center;font-family: '楷体';">{{rows.recordingTime.slice(11, 16)}}</td>-->
<!--            </tr>-->
<!--          </table>-->
<!--&lt;!&ndash;          <el-table class="jiezhanglisttable" empty-text = "玉泉宫" :data="tableData" sticky-header&ndash;&gt;-->
<!--&lt;!&ndash;                    style="width: 30% ;margin-top: 10px;overflow-y: auto;">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column prop="handBrand" label="手牌号" min-width="1%"  align="center">&ndash;&gt;-->
<!--&lt;!&ndash;              <template scope="scope">&ndash;&gt;-->
<!--&lt;!&ndash;                <span>{{scope.row.handBrand}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              </template>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            &lt;!&ndash;                <el-table-column prop="projectCode" label="商品编号" width="180" align="center"></el-table-column>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column prop="entryName" label="商品名称" min-width="2%"  align="center"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;              prop="unitPrice"&ndash;&gt;-->
<!--&lt;!&ndash;              min-width="1%"&ndash;&gt;-->
<!--&lt;!&ndash;              label="单价/元" align="center">&ndash;&gt;-->
<!--&lt;!&ndash;            </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;              prop="quantity"&ndash;&gt;-->
<!--&lt;!&ndash;              label="数量/个"&ndash;&gt;-->
<!--&lt;!&ndash;              min-width="1%"&ndash;&gt;-->
<!--&lt;!&ndash;              align="center">&ndash;&gt;-->
<!--&lt;!&ndash;            </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;              prop="nickName"&ndash;&gt;-->
<!--&lt;!&ndash;              label="录单员"&ndash;&gt;-->
<!--&lt;!&ndash;              min-width="1%"&ndash;&gt;-->
<!--&lt;!&ndash;              align="center">&ndash;&gt;-->
<!--&lt;!&ndash;            </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;              prop="recordingTime"&ndash;&gt;-->
<!--&lt;!&ndash;              label="时间"&ndash;&gt;-->
<!--&lt;!&ndash;              min-width="1%"&ndash;&gt;-->
<!--&lt;!&ndash;              align="center">&ndash;&gt;-->
<!--&lt;!&ndash;              <template scope="scope">&ndash;&gt;-->
<!--&lt;!&ndash;                <span>{{scope.row.recordingTime.slice(11, 16)}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              </template>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-table>&ndash;&gt;-->
<!--          <div style="margin-top:1px;border-top: 4px solid #ccc;"></div>-->
<!--          <span style="font-size: 25px;font-family: '楷体'">结账方式</span>-->
<!--          <div style="margin-top:1px;border-top: 4px solid #ccc;"></div>-->
<!--&lt;!&ndash;          <el-table style="overflow-y: auto;width: 10%;margin-top: 5px;" :data="methodList" :show-header="false" >&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column label="付款方式" min-width="1%"  align="center" prop="paymentMethod" >&ndash;&gt;-->
<!--&lt;!&ndash;              <template slot-scope="scope">&ndash;&gt;-->

<!--&lt;!&ndash;              </template>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column label="付款金额" min-width="1%"  align="center" prop="paymentAmount" />&ndash;&gt;-->
<!--&lt;!&ndash;          </el-table>&ndash;&gt;-->
<!--          <table  cellspacing="18">-->
<!--            <tr v-for="rows in methodList" >-->
<!--              <td  style="text-align: center;font-family: '楷体';"><dict-tag :options="dict.type.yqg_payment_method" :value="rows.paymentMethod"/></td>-->
<!--              <td style="text-align: center;font-family: '楷体';">{{rows.paymentAmount}}</td>-->
<!--            </tr>-->
<!--          </table>-->

<!--          <div style="border-top: 4px solid #ccc;"></div>-->
<!--          <span style="font-size: 25px;font-family: '楷体'">团体</span>-->
<!--          <div style="margin-top:1px;border-top: 4px solid #ccc;"></div>-->
<!--&lt;!&ndash;          <el-table class="jiezhanglisttable" empty-text = "玉泉宫" :data="billsList" sticky-header&ndash;&gt;-->
<!--&lt;!&ndash;                    style="width: 20% ;margin-top: 5px;overflow-y: auto;" :show-header="false" >&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;              prop="together"&ndash;&gt;-->
<!--&lt;!&ndash;              label="录单员"&ndash;&gt;-->
<!--&lt;!&ndash;              min-width="1%"&ndash;&gt;-->
<!--&lt;!&ndash;              align="center">&ndash;&gt;-->
<!--&lt;!&ndash;            </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-table>&ndash;&gt;-->
<!--          <table  cellspacing="18">-->
<!--            <tr v-for="rows in billsList" >-->
<!--              <td style="text-align: center;font-family: '楷体';">{{rows.together}}</td>-->
<!--            </tr>-->
<!--          </table>-->
<!--          <div style="border-top: 4px solid #ccc;"></div>-->
<!--          <span style="font-size: 25px;font-family: '楷体'">应收额:{{barform.totalConsumptionAmount}}</span>-->
<!--          <div style="border-top: 4px solid #ccc;"></div>-->
<!--          <span style="font-size: 25px;font-family: '楷体'">实收额:{{this.methodAmount}}</span>-->
<!--          <div style="border-top: 4px solid #ccc;"></div>-->


<!--          <div style="font-family: '楷体'" >当前日期:{{currentDate}}</div>-->
<!--          <div style="font-family: '楷体'"  >地址:辽宁省锦州市凌河区靖东街杏花里13号玉泉宫温泉洗浴会馆</div>-->
<!--          <div style="font-family: '楷体'"  >电话:1234567890</div>-->
<!--        </div>-->
<!--    </div>-->

    <div class="jiezhangsec-box">
      <div class="jiezhangleft_box">
        <el-card class="jiezhangtwo-box-card" shadow="hover">
          <el-tabs v-model="activeName" @tab-click="handleClick">
<!--            <el-tab-pane label="明细模式" name="first">-->

              <el-table class="jiezhanglisttable" empty-text = "玉泉宫" :data="tableData" sticky-header
                        height="628px"  border
                        style="width: 100% ;margin-top: 10px;overflow-y: auto;">
                <el-table-column type="index" label="序号" min-width="10%"  align="center"></el-table-column>
<!--                <el-table-column prop="projectCode" label="商品编号" width="180" align="center"></el-table-column>-->
                <el-table-column prop="entryName" label="商品名称" min-width="20%"  align="center"></el-table-column>
                <el-table-column
                  prop="mnemonicCode"
                  sortable
                  label="助记码" min-width="15%"  align="center">
                </el-table-column>
                <el-table-column
                  prop="unitPrice"
                  min-width="10%"
                  sortable
                  label="单价" align="center">
                </el-table-column>
                <el-table-column
                  prop="quantity"
                  label="数量"
                  min-width="10%"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="totalAmount"
                  sortable
                  label="金额"
                  min-width="10%"
                  align="center">
                </el-table-column>
                <el-table-column prop="note10" label="备注" min-width="25%" align="center"></el-table-column>
              </el-table>
            <!--合计行（头）-->
<!--            <el-table sticky-header border style="width: 100% ;margin-top: -1px;">
              <el-table-column label="合计" width="100" align="center"></el-table-column>
              <el-table-column label="" width="200" align="center"></el-table-column>
              <el-table-column label="" width="180" align="center"></el-table-column>
              <el-table-column label="" width="120" align="center"></el-table-column>-->
<!--              <el-table-column label="" width="140" align="center"></el-table-column>
              <el-table-column label="" width="140" align="center"></el-table-column>
              <el-table-column label="" width="180" align="center"></el-table-column>-->
<!--              <el-table-column :label="quantity" width="120" align="center"></el-table-column>

              <el-table-column :label="amount" width="120" align="center"></el-table-column>
              <el-table-column label="" width="213" align="center"></el-table-column>-->

              <!--              <el-table-column label="" align="center"></el-table-column>-->
<!--            </el-table>-->

            <!--覆盖层，重要（大概），忽删-->
<!--            <div style="background-color: white;z-index: 99;margin-top: -60px"/>-->

<!--            </el-tab-pane>-->

<!--            <el-tab-pane label="合计模式" name="second">合计模式</el-tab-pane>
            <el-tab-pane label="合计模式2" name="third">合计模式2</el-tab-pane>-->

          </el-tabs>
        </el-card>
      </div>


      <div class="jiezhangbr"></div>

      <div class="jiezhangright_box">

        <el-card class="jiezhangthree-box-card" shadow="hover">

          <div style="margin-top: 10%">
            <el-form :model="barform" ref="barform" :rules="rules">

              <div style="margin-bottom: 20px">
                <el-row>
<!--                  <el-col :span="12">
                    <el-form-item label="手牌" prop="handBrand" label-width="80px" style="width: 297px">
                      <el-input
                        v-model="barform.handBrand"
                        clearable
                        placeholder=""
                        disabled="disabled"
                      />
                    </el-form-item>
                  </el-col>-->
                  <el-col :span="12">
                    <el-form-item label="总费用" prop="totalAmount" label-width="100px" style="width: 297px">
                      <el-input
                        v-model="barform.totalConsumptionAmount"
                        clearable
                        placeholder=""
                        disabled="disabled"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="折扣额" prop="discountAmount" label-width="80px" style="width: 297px">
                      <el-input
                        v-model="barform.discountAmount"
                        clearable
                        placeholder=""
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>


              <div style="margin-bottom: 20px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="实收额" prop="paidInAmount" label-width="100px" style="width: 297px">
                      <el-input
                        v-model="barform.paidInAmount"
                        clearable
                        placeholder=""
                        blur="cost"

                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="支付方式" prop="paymentMethod" label-width="80px" style="width: 297px">
                      <el-select v-model="barform.paymentMethod" placeholder="请选择付款方式">
                        <el-option
                          v-for="dict in dict.type.yqg_payment_method"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <el-row>

                <el-col :span="12">
                  <el-form-item label="补齐消费" prop="supplementaryConsumption" label-width="100px" style="width: 297px">
                    <el-input
                      v-model="barform.supplementaryConsumption"
                      clearable
                      placeholder=""
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-show="this.barform.paymentMethod=='7'||this.barform.paymentMethod=='16'">
                  <el-form-item label="会员卡号" prop="cardNumber" label-width="80px" style="width: 297px">
                    <el-input
                      v-model="barform.cardNumber"
                      clearable
                      placeholder=""
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>

<!--                <el-col :span="12">
                  <el-form-item label="找零金额" prop="changeAmount" label-width="100px" style="width: 297px">
                    <el-input
                      v-model="barform.changeAmount"
                      clearable
                      placeholder=""
                    />
                  </el-form-item>
                </el-col>-->

              </el-row>
            </el-form>



            <div style="margin-top: 30px">
              <el-form>
                <el-form-item style="text-align: right;">
                  <el-button type="primary" @click="jiezhang(barform)">结 账</el-button>
                  <el-button @click="quxiao">重 置</el-button>
                </el-form-item>
              </el-form>
            </div>


          </div>
          <el-card>
            <el-table style="height: 265px;overflow-y: auto;" border sticky-header :data="methodList">
              <el-table-column type="index" label="序号" min-width="10%"  align="center"></el-table-column>
              <el-table-column label="付款方式" align="center" prop="paymentMethod" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.yqg_payment_method" :value="scope.row.paymentMethod"/>
                </template>
              </el-table-column>
              <el-table-column label="付款金额" align="center" prop="paymentAmount" />
              <el-table-column label="结账时间" align="center" prop="closingTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.closingTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

        </el-card>

      </div>

    </div>
  </div>


</template>

<script>

  import { listBills1, getBills, delBills, addBills, updateBills,ppp } from "@/api/module/whd/heji";
import {listDetails,updateDetails} from "@/api/module/whd/jiezhang";
import { listMethod, getMethod, delMethod, addMethod, updateMethod } from "@/api/module/whd/method";
import printJS from "print-js";


export default {
  dicts: ['yqg_hand_category', 'yqg_hand_state', 'yqg_payment_method', 'yqg_consumption_status', 'yqg_retention_status', 'yqg_project_category', 'yqg_post', 'yqg_check_out_status', 'yqg_department', 'yqg_merge_status', 'yqg_sailings_signs', 'yqg_next_clock_status'],
  data() {

    return {
      // 遮罩层
      currentDate: new Date().toLocaleDateString(),
      loading: true,
      billsList:[],
      // 查询参数
      queryParamsbill: {
        handBrand: null,
        handState: "1",
      },
      // 查询参数
      queryParams: {
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 查询结账方式参数
      queryMethodParams: {
        pageNum: 1,
        pageSize: 10,
        barBillsId: null,
        totalConsumptionAmount: null,
        handBrand: null,
        userId: null,
        handId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        closingTime: null,
        paymentAmount: null,
        paymentMethod: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      barform: {
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: null,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: 0,
        checkoutTime: null,
        supplementaryConsumption: 0,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardNumber:null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      activeName: 'first',
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        /*handBrand:[{
          required:true,message:"手牌号不能为空",trigger:"blur"
        }],*/
        /*totalAmount:[{
          required:true,message:"总消费不能为空",trigger:"blur"
        }],*/
        supplementaryConsumption:[{
          required:true,message:"补齐消费不能为空",trigger:"blur"
        }],
        paidInAmount:[{
          required:true,message:"实收额不能为空",trigger:"blur"
        }],
        paymentMethod:[{
          required:true,message:"支付方式不能为空",trigger:"change"
        }],
        /*note10:[{
          required:true,message:"会员卡号不能为空",trigger:"blur"
        }],*/
        discountAmount:[{
          required:true,message:"折扣额不能为空",trigger:"blur"
        }]
      },
      tableData: [],
      // 为适应数据处理新增
      // 处理后的数组
      detailTableData: [],
      // 已点
      ordered: [],
      mergeOrdered: [],
      retentionOrdered: [],
      // 对应索引
      orderedIndex: {},
      mergeOrderedIndex: {},
      retentionOrderedIndex: {},
      // 结账方式表格数据
      methodList: [],
      // 合计
      amount: 0, // 总价格
      quantity: 0, // 总数量
      // 付款方式合计
      methodAmount: 0, // 总价格
    }
  },
  created() {
    const handBrand = this.$route.query.handBrand;
    console.log("参数："+handBrand);
    console.log(typeof (handBrand ));
    if(handBrand.toString()!==""){
      this.queryMethodParams.handBrand=handBrand.toString();
      this.queryParams.handBrand=handBrand.toString();
      this.barform.handBrand=handBrand.toString();
      this.getMethodList();
      this.getList();
      console.log(typeof (this.queryParams.handBrand ));
    }
    else{

    }

  },
  methods: {
    getList() {
      this.queryParamsbill.handBrand=this.queryParams.handBrand;
      listBills1(this.queryParamsbill).then(response => {
        this.billsList = response.rows;
      });
    },
    //返回方法
    back(){
      this.$router.push({path: '/batai/bartai'});
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
    /** 查询结账方式列表 */
    getMethodList() {
      this.loading = true;
      listMethod(this.queryMethodParams).then(response => {
        this.methodList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.getDetailsList();
      });


    },
    getMethodAmount(){
      this.methodAmount=0;
      for (var i=0;i<this.methodList.length;i++){
        this.methodAmount+=parseInt(this.methodList[i].paymentAmount);
      }
      console.log("结账方式合计")
      console.log(this.methodAmount)
    },

    //指定列求和
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      //第一列命名合计
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));

        //指定allCompanyNum、allCarNum、allDriverNum不求和，其余列军求和
        if (column.property !== 'visitorId' && column.property !== 'tableNumber' && column.property !== 'entryName' && column.property !== 'projectCategory'
          && column.property !== 'projectCode' && column.property !== 'mnemonicCode' && column.property !== 'unit'
          && column.property !== 'unitPrice'&& column.property !== 'note10') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = ''
        }
      });
      let jine=sums[sums.length-2];
      sums[sums.length-2]=Math.round(jine*100)/100;
      this.barform.totalConsumptionAmount=sums[sums.length-2];
      this.barform.paidInAmount=sums[sums.length-2];
      return sums;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if(this.queryParams.handBrand!==""&&this.queryParams.handBrand!==null){
        this.barform.handBrand=this.queryParams.handBrand;
        this.getDetailsList();
      }
      else{
        this.$modal.msgError("手牌号不能为空")
        this.tableData=[];
        this.detailTableData = [];
        this.ordered = [];
        this.retentionOrdered=[];
        this.mergeOrdered=[];
      }
      /*this.barform.handBrand=this.queryParams.handBrand;
      if(this.barform.handBrand!=null&&this.barform.handBrand!=""){
        console.log(this.barform.handBrand);
        this.getDetailsList();
      }
      else{
        this.tableData=[];
      }*/
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.barform.handBrand=null;
      this.detailTableData=[];
      this.ordered = [];
      this.retentionOrdered=[];
      this.mergeOrdered=[];
    },
    /** 查询消费详细列表 */
    /** 查询消费详细列表 */
    getDetailsList() {
      this.getMethodAmount();
      this.detailTableData = [];
      this.ordered = [];
      this.retentionOrdered=[];
      this.mergeOrdered=[];
      listDetails(this.queryParams).then(response => {
        this.tableData = response.rows;
        // 手动计算合计
        this.amount = 0
        this.quantity = 0
        for (let i = 0; i < this.tableData.length; i++) {
            this.quantity +=parseInt(this.tableData[i].quantity)
            this.amount +=parseInt(this.tableData[i].totalAmount)
        }
        this.barform.totalConsumptionAmount=this.amount;
        this.barform.paidInAmount=this.amount-this.methodAmount;
        this.barform.allCost=this.methodAmount;

        /*// 索引
        var index = 0
        // 数据处理，重复进行合并
        for (let i = 0; i < this.tableData.length; i++) {
          // 第一个直接push进数组
          if (i === 0) {
            // 如果是留牌项目
            if (this.tableData[i].retentionStatus === "0") {
              console.log(this.tableData[i].beforeLeave===null)
              if(this.tableData[i].beforeLeave!==null){
                this.detailTableData.push({
                  projectCode: this.tableData[i].projectCode,
                  entryName: this.tableData[i].entryName,
                  projectCategory: this.tableData[i].projectCategory,
                  quantity: parseInt(this.tableData[i].quantity),
                  unitPrice: this.tableData[i].unitPrice,
                  totalAmount: parseFloat(this.tableData[i].totalAmount),
                  mnemonicCode: this.tableData[i].mnemonicCode,
                  recordingTime: this.tableData[i].recordingTime,
                  note: "来自" + this.tableData[i].beforeLeave + "留牌",
                })
              }
            else{
                this.detailTableData.push({
                  projectCode: this.tableData[i].projectCode,
                  entryName: this.tableData[i].entryName,
                  projectCategory: this.tableData[i].projectCategory,
                  quantity: parseInt(this.tableData[i].quantity),
                  unitPrice: this.tableData[i].unitPrice,
                  totalAmount: parseFloat(this.tableData[i].totalAmount),
                  mnemonicCode: this.tableData[i].mnemonicCode,
                  recordingTime: this.tableData[i].recordingTime,
                  // note: "来自" + this.tableData[i].beforeLeave + "留牌",
                })
              }

              this.retentionOrdered.push(this.tableData[i].entryName)
              this.retentionOrderedIndex[this.tableData[i].entryName] = index
              index += 1
            }
            // 如果是并牌项目
            else if (this.tableData[i].mergeStatus === "0") {
              if(this.tableData[i].mergeHands!==null){
                this.detailTableData.push({
                  projectCode: this.tableData[i].projectCode,
                  entryName: this.tableData[i].entryName,
                  projectCategory: this.tableData[i].projectCategory,
                  quantity: parseInt(this.tableData[i].quantity),
                  unitPrice: this.tableData[i].unitPrice,
                  totalAmount: parseFloat(this.tableData[i].totalAmount),
                  mnemonicCode: this.tableData[i].mnemonicCode,
                  recordingTime: this.tableData[i].recordingTime,
                  note: "来自" + this.tableData[i].handBrand + "并牌",
                })
              }else {
                this.detailTableData.push({
                  projectCode: this.tableData[i].projectCode,
                  entryName: this.tableData[i].entryName,
                  projectCategory: this.tableData[i].projectCategory,
                  quantity: parseInt(this.tableData[i].quantity),
                  unitPrice: this.tableData[i].unitPrice,
                  totalAmount: parseFloat(this.tableData[i].totalAmount),
                  mnemonicCode: this.tableData[i].mnemonicCode,
                  recordingTime: this.tableData[i].recordingTime,
                  /!*note: "来自" + this.tableData[i].handBrand + "并牌",*!/
                })
              }

              this.mergeOrdered.push(this.tableData[i].entryName)
              this.mergeOrderedIndex[this.tableData[i].entryName] = index
              index += 1
            }
            // 其它（主牌项目）
            else {
              this.detailTableData.push({
                projectCode: this.tableData[i].projectCode,
                entryName: this.tableData[i].entryName,
                projectCategory: this.tableData[i].projectCategory,
                quantity: parseInt(this.tableData[i].quantity),
                unitPrice: this.tableData[i].unitPrice,
                totalAmount: parseFloat(this.tableData[i].totalAmount),
                mnemonicCode: this.tableData[i].mnemonicCode,
                recordingTime: this.tableData[i].recordingTime,
              })
              this.ordered.push(this.tableData[i].entryName)
              this.orderedIndex[this.tableData[i].entryName] = index
              index += 1
            }
          }
          // 不是第一个（可能需要进行数据合并）
          else {
            // 如果是留牌数据
            if (this.tableData[i].retentionStatus === "0") {
              // 如果数组中已经存在该项目
              if (this.retentionOrdered.includes(this.tableData[i].entryName)) {
                // 合并数量和总价
                this.detailTableData[this.retentionOrderedIndex[this.tableData[i].entryName]].quantity += parseInt(this.tableData[i].quantity)
                this.detailTableData[this.retentionOrderedIndex[this.tableData[i].entryName]].totalAmount += parseFloat(this.tableData[i].totalAmount)
              }
              // 如果不存在
              else {
                this.retentionOrdered.push(this.tableData[i].entryName)
                this.retentionOrderedIndex[this.tableData[i].entryName] = index
                index += 1
                if(this.tableData[i].beforeLeave!==null){
                  this.detailTableData.push({
                    projectCode: this.tableData[i].projectCode,
                    entryName: this.tableData[i].entryName,
                    projectCategory: this.tableData[i].projectCategory,
                    quantity: parseInt(this.tableData[i].quantity),
                    unitPrice: this.tableData[i].unitPrice,
                    totalAmount: parseFloat(this.tableData[i].totalAmount),
                    mnemonicCode: this.tableData[i].mnemonicCode,
                    recordingTime: this.tableData[i].recordingTime,
                    note: "来自" + this.tableData[i].beforeLeave + "留牌",
                  })
                }else{
                  this.detailTableData.push({
                    projectCode: this.tableData[i].projectCode,
                    entryName: this.tableData[i].entryName,
                    projectCategory: this.tableData[i].projectCategory,
                    quantity: parseInt(this.tableData[i].quantity),
                    unitPrice: this.tableData[i].unitPrice,
                    totalAmount: parseFloat(this.tableData[i].totalAmount),
                    mnemonicCode: this.tableData[i].mnemonicCode,
                    recordingTime: this.tableData[i].recordingTime,
                    // note: "来自" + this.tableData[i].beforeLeave + "留牌",
                  })
                }

              }
            }
            // 如果是并牌数据
            else if (this.tableData[i].mergeStatus === "0") {
              // 如果数组中已经存在该项目
              if (this.mergeOrdered.includes(this.tableData[i].entryName)) {
                // 合并数量和总价
                this.detailTableData[this.mergeOrderedIndex[this.tableData[i].entryName]].quantity += parseInt(this.tableData[i].quantity)
                this.detailTableData[this.mergeOrderedIndex[this.tableData[i].entryName]].totalAmount += parseFloat(this.tableData[i].totalAmount)
              }
              // 如果不存在
              else {
                this.mergeOrdered.push(this.tableData[i].entryName)
                this.mergeOrderedIndex[this.tableData[i].entryName] = index
                index += 1
                if(this.tableData[i].mergeHands!==null){
                  this.detailTableData.push({
                    projectCode: this.tableData[i].projectCode,
                    entryName: this.tableData[i].entryName,
                    projectCategory: this.tableData[i].projectCategory,
                    quantity: parseInt(this.tableData[i].quantity),
                    unitPrice: this.tableData[i].unitPrice,
                    totalAmount: parseFloat(this.tableData[i].totalAmount),
                    mnemonicCode: this.tableData[i].mnemonicCode,
                    recordingTime: this.tableData[i].recordingTime,
                    note: "来自" + this.tableData[i].handBrand + "并牌",
                  })
                }else{
                  this.detailTableData.push({
                    projectCode: this.tableData[i].projectCode,
                    entryName: this.tableData[i].entryName,
                    projectCategory: this.tableData[i].projectCategory,
                    quantity: parseInt(this.tableData[i].quantity),
                    unitPrice: this.tableData[i].unitPrice,
                    totalAmount: parseFloat(this.tableData[i].totalAmount),
                    mnemonicCode: this.tableData[i].mnemonicCode,
                    recordingTime: this.tableData[i].recordingTime,
                    /!*note: "来自" + this.tableData[i].handBrand + "并牌",*!/
                  })
                }

              }
            }
            // 其它（主牌数据）
            else {
              // 如果数组中已经存在该项目
              if (this.ordered.includes(this.tableData[i].entryName)) {
                this.detailTableData[this.orderedIndex[this.tableData[i].entryName]].quantity += parseInt(this.tableData[i].quantity)
                this.detailTableData[this.orderedIndex[this.tableData[i].entryName]].totalAmount += parseFloat(this.tableData[i].totalAmount)
              }
              // 如果不存在
              else {
                this.ordered.push(this.tableData[i].entryName)
                this.orderedIndex[this.tableData[i].entryName] = index
                index += 1
                this.detailTableData.push({
                  projectCode: this.tableData[i].projectCode,
                  entryName: this.tableData[i].entryName,
                  projectCategory: this.tableData[i].projectCategory,
                  quantity: parseInt(this.tableData[i].quantity),
                  unitPrice: this.tableData[i].unitPrice,
                  totalAmount: parseFloat(this.tableData[i].totalAmount),
                  mnemonicCode: this.tableData[i].mnemonicCode,
                  recordingTime: this.tableData[i].recordingTime,
                })
              }
            }
          }
        }*/
      });
    },
   /* getDetailsList() {
      this.detailTableData=[];
      this.ordered=[];
      listDetails(this.queryParams).then(response => {

        this.tableData = response.rows;

        console.log(this.tableData)
        // 数据处理，重复进行合并
        for (let i = 0; i < this.tableData.length; i++) {
          if (i === 0) {
            this.detailTableData.push({
              projectCode: this.tableData[i].projectCode,
              entryName: this.tableData[i].entryName,
              projectCategory: this.tableData[i].projectCategory,
              quantity: parseInt(this.tableData[i].quantity),
              unitPrice: this.tableData[i].unitPrice,
              totalAmount: parseFloat(this.tableData[i].totalAmount),
              mnemonicCode: this.tableData[i].mnemonicCode,
              recordingTime: this.tableData[i].recordingTime,
            })
            this.ordered.push(this.tableData[i].entryName)
          } else {
            if (this.ordered.includes(this.tableData[i].entryName)) {
              this.detailTableData[this.ordered.indexOf(this.tableData[i].entryName)].quantity += parseInt(this.tableData[i].quantity)
              this.detailTableData[this.ordered.indexOf(this.tableData[i].entryName)].totalAmount += parseFloat(this.tableData[i].totalAmount)
            } else {
              this.ordered.push(this.tableData[i].entryName)
              this.detailTableData.push({
                projectCode: this.tableData[i].projectCode,
                entryName: this.tableData[i].entryName,
                projectCategory: this.tableData[i].projectCategory,
                quantity: parseInt(this.tableData[i].quantity),
                unitPrice: this.tableData[i].unitPrice,
                totalAmount: parseFloat(this.tableData[i].totalAmount),
                mnemonicCode: this.tableData[i].mnemonicCode,
                recordingTime: this.tableData[i].recordingTime,
              })
            }
          }
        }
      });
    },*/
    /** 结账 **/
    jiezhang(){
      console.log(this.barform.cardNumber);
      this.$refs['barform'].validate((valid) => {
        if (valid) {

          if(this.barform.paymentMethod===null){

          }
          else{
            if(this.queryParams.handBrand===null){
              this.$modal.msgError("手牌号不能为空")
            }
            else{
              updateDetails(this.barform).then(response => {
                this.$modal.msgSuccess(" 结账成功");
                this.handleQuery();
                this.getMethodList();
              });

              if(parseInt(this.barform.totalConsumptionAmount)-parseInt(this.barform.paidInAmount)-parseInt(this.methodAmount)==0){
                this.back();
                //打印
                // printJS({
                //   printable: printArejiezhang, // 'printFrom', // 标签元素id
                //   type: 'html',
                //   targetStyles: ['*'],
                // })
              }
              this.getMethodList();
              this.quxiao();
              this.resetQuery();

            }

          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    cost(){
      let discount=parseFloat(this.barform.discountAmount);
      let paid=parseFloat(this.barform.paidInAmount);
      let total=parseFloat(this.barform.totalConsumptionAmount);
      let sup=total-discount*paid;
      console.log(sup)
      this.barform.supplementaryConsumption=(Math.round(sup*100)/100).toString();
    },
    /** 取消 **/
    quxiao() {
      this.$refs["barform"].resetFields();
      this.barform.totalAmount = null;
      this.barform.discountAmount = 0;
      this.barform.paymentMethod = null;
      this.barform.paidInAmount = 0;
      this.barform.supplementaryConsumption = 0;
    },
    onSubmit() {
      console.log('submit!');
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}


</script>



<style lang="scss" scoped>

.jiezhangone-box-card {
  height: 70px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.jiezhangtwo-box-card {
  height: 735px;
}

.jiezhangthree-box-card {
  height: 735px;
  text-align: center;
}

.jiezhangsec-box {
  height:735px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 15px;
  margin-bottom: 10px;
}
.whdxiaopiaocard{
  font-size: 20px;
  height: 600px;
  width: 100%;
}

.jiezhangleft_box {
  width: 60%;
  float: left;
  display: inline-block;
}

.jiezhangright_box {
  width: 39%;
  float: right;
  height: 735px;
  display: inline-block;
}

.button {
  width: 145px;
  height: 50px;
}

.jiezhangbr {
  width: 1%;
  height: 735px;
  display: inline-block;
}

::-webkit-scrollbar {
  width: 0 !important;
}
::v-deep .el-table__body-wrapper {
  // 整个滚动条
  &::-webkit-scrollbar {
    width: 0px; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }
  // 滚动条轨道
  &::-webkit-scrollbar-track {
    border: none;
  }
}
// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .jiezhanglisttable th.gutter {
  display: none;
  width: 0
}
::v-deep .jiezhanglisttable colgroup col[name='gutter'] {
  display: none;
  width: 0;
}
// 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
  width: 100% !important;
}

</style>
